<template>
    <div class="sx-systemHomePage-index-content">
        <!-- 轮播图 -->
        <el-carousel :interval="4000" type="card" height="300px" class="sx-systemHomePage-lunbo">
            <el-carousel-item v-for="item in 6" :key="item">
                <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
        <!-- 社区风采 -->
        <div class="sx-systemHomePage-card">
            <div class="sx-systemHomePage-card-body">
                <div class="sx-systemHomePage-card-body-titel">
                    <span>社区风采</span>
                    <span>...</span>
                </div>
                <div class="sx-systemHomePage-card-content">
                    <div class="sx-systemHomePage-card-content-item" v-for="(item,index) in 6" v-bind:key="index">
                        <div class="card-item-left"> 
                            <span>街舞社</span>
                        </div>
                        <div class="card-item-right"> 
                            <span>2021/7/23</span>
                            <span>图标</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'topContent',
  data () {
    return {
    }
  },
  methods: {
  },
  created(){
  }
}
</script>

<style lang="scss">
.sx-systemHomePage-index-content{
    margin: 0 auto;
    width: 1200px;
    background: rgb(159, 230, 226);
    display: flex;
    .sx-systemHomePage-lunbo{
        flex: 2;
        display: block;
        margin: auto 0;
        overflow-y: hidden;
    }
    .sx-systemHomePage-card{
        flex: 1;
        padding: 20px;
        .sx-systemHomePage-card-body{
            border-radius: 5px;
            background: #fff;
            height: 300px;
            .sx-systemHomePage-card-body-titel{
                padding: 5px 20px;
                display: flex;
                justify-content: space-between;
            }
            .sx-systemHomePage-card-content{
                .sx-systemHomePage-card-content-item{
                    font-size: .9rem;
                    margin: 20px 20px;
                    border-bottom: 1px solid #eee;
                    display: flex;
                    .card-item-left{
                        padding-left: 10px;
                        flex: 1;
                    }
                    .card-item-right{
                        text-align: center;
                        display: flex;
                        justify-content: space-between;
                        flex: 1;
                        & span:not(:nth-child(0)){
                            color: rgb(190, 190, 190);
                            flex: 2;
                        }
                        & span:not(:nth-child(1)){
                            color: rgb(0, 0, 0);
                            flex: 1;
                        }
                    }
                }
            }
        }
    }
}
</style>
